@extends('admin.common.main')
@section('css')
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
@endsection
@section('content')
    <body>
    <article class="page-container">

        {{-- 表单验证提示 --}}
        @include('admin.common.error')
        @include('admin.common.success')

        <form action="{{ route('admin.fang.store') }}" method="post" class="form form-horizontal" id="fang-add">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房源名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="fang_name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" name="fang_xiaoqu">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>小区地址：</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <select name="fang_province" style="width: 100px;" onchange="change_city(this,'fang_city')">
                        <option value="0">==请选择省==</option>
                        @foreach($cityData as $val)
                            <option value="{{$val['id']}}">{{$val['name']}}</option>
                        @endforeach
                    </select>
                    <select name="fang_city" id="fang_city" style="width: 100px;"
                            onchange="change_city(this,'fang_region')">
                        <option value="0">==市==</option>
                    </select>
                    <select name="fang_region" id="fang_region" style="width: 100px;">
                        <option value="0">==区/县==</option>
                    </select>
                </div>
                <div class="formControls col-xs-4 col-sm-5">
                    <input type="text" class="input-text" name="fang_addr" placeholder="小区详情地址和房源说明">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租金：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" style="width: 200px;" name="fang_rent"> 元
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>楼层：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" style="width: 200px;" name="fang_floor">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租期方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_rent_type" style="width: 200px;">
                        @foreach($fangRentTypeData as $val)
                            <option value="{{$val['id']}}">{{$val['name']}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几室：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_shi" value="2">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几厅：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_ting" value="1">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>几卫：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_wei" value="2">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>朝向：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_direction" style="width: 200px;">
                        @foreach($fangDirectionData as $val)
                            <option value="{{$val['id']}}">{{$val['name']}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>租赁方式：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_rent_class" style="width: 200px;">
                        @foreach($fangRentClassData as $val)
                            <option value="{{$val['id']}}">{{$val['name']}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑面积：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_build_area" value="120" style="width: 60px;">平米
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>使用面积：</label>
                <div class="formControlsq col-xs-8 col-sm-9">
                    <input type="number" class="input-text" name="fang_using_area" value="105" style="width: 60px;">平米
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>建筑年代：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" onfocus="WdatePicker({dateFmt:'yyyy'})" name="fang_year" class="input-text Wdate"
                           style="width:120px;">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>配套设施：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    @foreach($fangConfigData as $val)
                        <input type="checkbox" value="{{$val['id']}}" name="fang_config[]">{{$val['name']}}
                    @endforeach
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋图片：</label>
                <div class="formControls col-xs-2 col-sm-2">
                    <div id="picker">房屋图片</div>
                </div>
                <div class="formControls col-xs-6 col-sm-7">
                    <input type="hidden" name="fang_pic" id="fang_pic"/>
                    <div id="imgList"></div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房东：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="fang_owner" style="width: 200px;">
                        @foreach($fangOwner as $val)
                            <option value="{{$val['id']}}">{{$val['name']}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否推荐：</label>
                <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <label>
                            <input name="is_recommend" type="radio" value="0" checked>
                            否
                        </label>
                    </div>
                    <div class="radio-box">
                        <label>
                            <input type="radio" value="1" name="is_recommend">
                            是
                        </label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋描述：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea name="fang_desn" class="form-control textarea"></textarea>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>房屋详情：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <textarea id="fang_body" name="fang_body">房屋详情信息添加</textarea>
                </div>
            </div>
            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    <input class="btn btn-primary radius" type="submit" value="添加房源">
                </div>
            </div>
        </form>


    </article>
    @endsection

    @section('js')
        <script type="text/javascript" src="/webuploader/webuploader.js"></script>
        <!-- 配置文件 -->
        <script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
        <!-- 编辑器源码文件 -->
        <script type="text/javascript" src="/ueditor/ueditor.all.js"></script>
        <script type="text/javascript">
            var ue = UE.getEditor('fang_body', {
                autoHeight: false
            });

            var uploader = WebUploader.create({

                // swf文件路径
                swf: '/webuploader/Uploader.swf',
                method: 'post',
                auto: true,
                chunked: true,
                formData: {
                    _token: "{{csrf_token()}}"
                },
                // 文件接收服务端。图片上传的接口
                server: "{{route('admin.fang.UploadFile')}}",

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
            });

            //上传成功之后的回调方法
            uploader.on('uploadSuccess', function (pic, ret) {
                //获取到上传成功的图片路径
                var imgPath = ret.data.pic
                //把图片追加到图片盒子里
                var imgHtml = `  <div style="position: relative;width:100px;">
                <img src="${imgPath}" style="width:100px;" />
                <strong onclick="delPic(this,'${imgPath}')" style="position: absolute;right: 2px;top: 2px;color: white;font-size: 20px;">X<strong>
            </div>`


                $('#imgList').append(imgHtml);

                //把图片路径追加到隐藏域中，但是首先要获取原本隐藏域里面的值
                var picVal = $('#fang_pic').val()
                var PicVal = picVal + "#" + imgPath;

                $('#fang_pic').val(PicVal);
            });


            function delPic(ret, imgPath) {
                //要移除视图展示图片
                $(ret).parent().remove()
                //要去掉隐藏域相对应的值
                var picVal = $('#fang_pic').val()
                //把要替换的字符串替换成空
                var res = picVal.replace(`#${imgPath}`, '')
                //最后重新赋值给隐藏域
                $('#fang_pic').val(res)
                //要真正的删除图片资源
                $.ajax({
                    url: "{{route('admin.fang.UploadFile')}}",
                    method: 'delete',
                    data: {
                        _token: "{{csrf_token()}}",
                        pic: imgPath
                    },
                    success: res => {
                        console.log(res)
                    }
                })
            }



            function change_city(obj, city_name) {
                let cityId = $(obj).val()
                let url = "{{route('admin.city')}}?id=" + cityId

                $.ajax({
                    url: url,
                    success: ret => {
                        let cityData = ret.data
                        let html = '<option value="0">==请选择==</option>'
                        cityData.map(function (item) {
                            html += `<option value="${item.id}">${item.name}</option>`
                        })
                        $(`#${city_name}`).html(html)
                    }
                })


            }
        </script>
@endsection
